<template>
	<view>
		<view class="c-wrap">
			<u-form ref="uForm" label-width="auto">
				<u-form-item label="头像" @tap="uploadAvatar">
					<cos-avatar mode="widthFix" slot="right" :src="form.avatar" size="100"></cos-avatar>
				</u-form-item>
				<u-form-item label="昵称">
					<u-input v-model="form.nickname" input-align="right"/>
				</u-form-item>
				<u-form-item label="性别" :left-icon="form.is_cert==1?'lock-fill':''">
					<u-radio-group v-model="form.gender" @change="genderChange" slot="right">
						<u-radio shape="circle" name="1">男</u-radio>
						<u-radio shape="circle" name="2">女</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item v-if="type=='perfect'" label="手机" prop="mobile" label-width="150">
					<view class="text-right">{{form.mobile}}</view>
					<u-button slot="right" type="primary" size="mini" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" @tap="getCode">点击绑定</u-button>
				</u-form-item>
				<u-form-item label="身份" :left-icon="form.is_cert==1?'lock-fill':''">
					<u-input input-align="right" type="select" :select-open="selectIdentityShow" :value="form.identity_label" placeholder="请选择身份" @click="selectIdentityShow = true"></u-input>
				</u-form-item>
				<u-form-item label="城市">
					<u-input type="select" :value="region" placeholder="请选择所在城市" input-align="right" :select-open="citySelectChange" @click="citySelectChange=true"></u-input>
				</u-form-item>
				<u-form-item label="个性签名" label-position="top">
					<u-input v-model="form.intro" type='textarea' placeholder="请用一句话简单的介绍自己"/>
				</u-form-item>
			</u-form>
		</view>
		<view class="f-fixed d-flex justify-content-between">
			<button class="button" v-if="form.status==0" type="default">资料审核中</button>
			<button class="button" v-else @tap="save" type="primary">保存</button>
			<button class="button" v-if="type=='perfect'" @tap="leave" type="default">暂不注册</button>
		</view>
		<!-- 身份选择 -->
		<u-select mode="single-column" :list="initialize.identityTags" v-model="selectIdentityShow" @confirm="selectIdentityConfirm"></u-select>
		<!-- 城市选择 -->
		<city-select v-model="citySelectChange" @city-change="cityChange"></city-select>
		<!-- 上传头像-->
		<view :style="'position: absolute;bottom: 0;z-index:'+uploadAvatarZIndex+';'">
			<avatar
				selWidth="200px" selHeight="200px" ref='avatar' fileType='png'
				:avatarSrc="url" @upload="confirmUloadAvatar" @end="uploadAvatarEnd" quality="1" inner=true
				avatarStyle="width: 200px; height: 200px; margin: 40px;">
			</avatar>
		</view>	
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
	import citySelect from '@/components/city-select/city-select.vue';
	export default {
		components: {
			citySelect,
			avatar
		},
		data() {
			return {
				token:'',
				citySelectChange:false,
				selectIdentityShow:false,
				uploadAvatarZIndex:-99,
				region:'',
				identityList:[],
				type:'',
				form: {
					avatar:'',
					nickname:'',
					mobile:'',
					genter:'',
					identity:'',
					identity_label:'',
					province:'',
					p_value:'',
					city:'',
					c_value:'',
					intro:'',
					status:1
				},
			};
		},
		computed:{
			...mapState(['initialize', 'userInfo']),
		},
		onLoad(options) {
			this.type = options.type;
			if(this.type=='perfect') {
				this.form.nickname = options.nickname;
				this.form.avatar   = options.avatar;
				this.token         = options.token;
			}else if(this.type=='edit') {
				this.form   = this.userInfo;
				this.region = this.form.province + " " + this.form.city;
			}
		},
		methods: {
			...mapMutations(['setLogin', 'setUserInfo']),
			// 修改性别
			genderChange(e){	
				if(this.form.is_cert==1) {
					this.$q.toast('已认证，不支持修改性别！');return;
				}
				this.form.gender = e;
			},
			selectIdentityConfirm(e) {
				e.map((val, index) => {
					this.form.identity_label = val.label;
					this.form.identity = val.value;
				})
			},
			uploadAvatar() {	
				this.uploadAvatarZIndex = 99;
				this.$refs.avatar.fChooseImg(1, {selWidth: "200rpx", selHeight: "200rpx", expWidth: "200rpx", expHeight: "200rpx", inner:false}, {data: 'xxx'});
			},
			async save() {
				if(this.form.status==0) {
					this.$q.toast('资料审核中，暂不支持修改！');return;
				}
				
				if(!this.form.nickname) {
					this.$q.toast('请输入昵称');return;
				}
				
				if(!this.form.gender) {
					this.$q.toast('请选择性别');return;
				}
				
				if(!this.form.province) {
					this.$q.toast('请选择城市');return;
				}
				
				if(!this.form.identity) {
					this.$q.toast('请选择身份');return;
				}
				
				if(!this.form.mobile) {
					this.$q.toast('请绑定手机号码');return;
				}
				
				if(!this.form.intro) {
					this.$q.toast('请填写个人签名');return;
				}
	

				uni.showLoading({
					mask:true,
					title:"保存中..."
				})
				
				this.setLogin(true);
				this.setUserInfo(res.data)
				uni.setStorageSync("token", this.token);
				uni.setStorageSync('userInfo', res.data);
				uni.navigateBack();
			},
			leave() {
				uni.navigateBack();
			},
			cityChange(e) {
				this.region = e.province + " " + e.city;
				this.form.province = e.province;
				this.form.p_value = e.provinceValue;
				this.form.city     = e.city;
				this.form.c_value = e.cityValue;
			},
			confirmUloadAvatar(rsp) {
				this.form.avatar = rsp.path;
			},
			uploadAvatarEnd() {
				this.uploadAvatarZIndex = -99;
			},
			onGetPhoneNumber(e) {
				let that = this;
				let msg = e.detail.errMsg;
				let encrypted = e.detail.encryptedData;
				let iv = e.detail.iv;
				if (msg == 'getPhoneNumber:ok') {
					this.form.mobile = "13000000000"
					uni.hideLoading();
				}
			}
		}
	}
</script>
<style scoped>
	.c-wrap {
		padding: 20rpx 20rpx 0rpx 20rpx;
		background-color: #FFFFFF;
	}

	.bind-mobile {
		display: flex;
	}

	/* 标签 */
	.tag-box {}

	.tag-box .tag {
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		display: inline-block;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		/* background-color: #ffebe5; */
		background-color: #f5f5f5;
		
	}
	
	.tag-box .selected-tag:nth-child(1n) {
		background-color: #ffebe5;
	}

	.tag-box .selected-tag:nth-child(2n) {
		background-color: #ecf9f2;
	}

	.tag-box .selected-tag:nth-child(3n) {
		background-color: #fff7e5;
	}

	.tag-box .selected-tag:nth-child(5n) {
		background-color: #b3e0ff;
	}
	
	.f-fixed {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.button {
		margin: 20rpx;
		width: 100%;
	}
</style>
